<template>
  <div id="shop-car">
    <!-- 头部返回 -->
    <div class="top-bar">
      <div class="go_back" @click="goBack">
        <van-icon name="arrow-left" />
      </div>
      <div class="title">购物车</div>
      <div class="message"></div>
    </div>
    <!-- 购物车商品信息内容 -->
    <div class="goodsInfo-all">
      <!-- 每一条商品信息 -->
      <transition-group  mode="out-in">
        <div class="single-good" v-for="item in allGoods" :key="item.id">
          <checkBox :getId="item.id" @getGoods="getGoodsInfo"></checkBox>
          <!-- 放图片的地方 -->
          <div class="good-img">
            <img :src="item.src" alt />
          </div>
          <!-- 商品标题 -->
          <div class="good-title">
            <div class="title">{{item.name}}</div>
            <div class="title-number">{{item.id}}</div>
          </div>
          <!-- 商品添加减少和总价 -->
          <div class="add-and_count">
              <!-- 引用stepper组件  需要传入数量和id 来判断增加减少--> 
            <stepper :count='item.count' :getIds="item.id" @getGod="getGoodsInfo"></stepper>
            <!-- 价格 -->
            <div class="price">￥{{item.allPrice}}</div>
          </div>
        </div>
      </transition-group>
    </div>
    <!-- 结算 -->
    <div class="account">
      <div class="priceAll">
        <div class="goods-price">
          <span class="price">￥{{$store.getters.getAllGoodsPrice}}</span>
          <span class="title">商品</span>
        </div>
        <span class="flag">+</span>
        <div class="goods-yf">
          <span class="price">￥0.00</span>
          <span class="title">运费</span>
        </div>
      </div>
      <div class="sattle-all" @click="postAllGoods">
        去结算
        <span>({{$store.getters.getGoodsAllCount}})</span>
      </div>
    </div>
  </div>
</template>
<script>
import checkBox from "../children/CheckBox.vue";
import stepper from '../children/Stepper.vue'
export default {
  data() {
    return {
      //存放商品列表
      allGoods: [],
      // 保存单个商品总价数组
      singleAllPrice: []
    };
  },
  methods: {
    countChange(value) {
      console.log(value);
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 获取加入购物车的商品渲染数据
    getGoodsInfo() {
      this.allGoods = this.$store.state.goods;
    },
    //提交数据
    postAllGoods(){
        //现获取state中的id和数量
        this.$http.get("http://172.20.10.4:5000/addToMycar?g_id=1&number=100").then(r=>{
          console.log(r);
        })
    }
  },
  created() {
    this.getGoodsInfo();
  },
  components: {
    checkBox,
    stepper
  }
};
</script>


<style lang="less" scoped>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateY(20px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }

    .v-move {
      transition: all 0.6s ease;
    }
    .v-leave-active{
      position: absolute;
    }
#shop-car {
  // padding-top: 1.3rem;
  width: 100%;
  .top-bar {
    height: 1.3rem;
    background-color: #e83632;
    width: 100%;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    .title {
      color: #fff;
      font-size: 0.34rem;
      margin: 0 auto;
    }
    .message {
      width: 0.44rem;
      height: 0.44rem;
      background: url("../../images/message2.png") no-repeat center center;
      background-size: 0.44rem 0.44rem;
    }
    .go_back {
      .van-icon {
        color: #fff;
        font-size: 0.5rem;
      }
    }
  }
  .goodsInfo-all {
    width: 100%;
    display: flex;
    flex-direction: column;
    .single-good {
      border-bottom: 0.01rem solid #eee;
      background-color: #fff;
      padding: 0.4rem 0;
      padding-left: 0.2rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      .good-img {
        width: 1.05rem;
        height: 1rem;
        border: 0.02rem solid #ccc;
        margin-left: 0.25rem;
        padding: 0.05rem 0.1rem;
        img {
          width: 100%;
        }
      }
      .good-title {
        width: 50%;
        display: flex;
        flex-direction: column;
        margin-left: 0.25rem;
        padding-right: 0.2rem;
        .title {
          font-size: 0.26rem;
          color: #101010;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 0.35rem;
        }
        .title-number {
          font-size: 0.24rem;
          color: #919191;
        }
      }
      .add-and_count {
        display: flex;
        flex-direction: column;
        .price {
          font-size: 0.26rem;
          color: #ff1414;
          padding-top: 0.2rem;
        }
      }
    }
  }
  .account {
    // bottom: 1.05rem;
    // position: fixed;
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-left: 0.2rem;
    background-color: #fff;
    height: 0.9rem;
    justify-content: space-between;
    /deep/.van-checkbox__icon {
      height: 0.4rem;
      img {
        width: 0.44rem;
        height: 0.38rem;
      }
    }
    span.checkall {
      font-size: 0.24rem;
      color: #676767;
      line-height: 0.9rem;
      padding-left: 0.1rem;
      color: #ff3c25;
    }
    .sattle-all {
      height: 100%;
      width: 2rem;
      background-color: #ff3c25;
      color: #fff;
      line-height: 0.9rem;
      text-align: center;
      font-size: 0.28rem;
    }
    .priceAll {
      display: flex;
      flex-direction: row;
      .goods-price {
        line-height: 0.45rem;
        display: flex;
        flex-direction: column;
        .price {
          color: #ff3c25;
          font-size: 0.28rem;
        }
        .title {
          font-size: 0.28rem;
          color: #676767;
          text-align: center;
        }
      }
      span.flag {
        font-size: 0.24rem;
        color: #676767;
        line-height: 0.9rem;
        margin: 0 0.1rem;
      }
      .goods-yf {
        line-height: 0.45rem;
        display: flex;
        flex-direction: column;
        .price {
          color: #ff3c25;
          font-size: 0.28rem;
        }
        .title {
          font-size: 0.28rem;
          color: #676767;
          text-align: center;
        }
      }
    }
  }
}
</style>